<!DOCTYPE html>
<html lang="ja" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>申し込み内容のご入力</title>
    <link rel="stylesheet" href="/css/all.css">

</head>


<body>


    <div class="header">
        <div>
            <a href="#">カードサイト</a>
            <a href="#">お手続き</a>
            <a href="#">お問い合わせ</a>
            <a href="#">会員ログイン</a>
        </div>
    </div>

    <hr>
    <div class="title-bar container0">申し込み内容のご入力</div>
    <div class="container">
        <hr>

        <table>
            <!-- 上半部分 -->
            <tr>
                <th
                    style="border: 1px solid; border-top-color: rgb(166, 166, 166); border-right-color: rgb(166, 166, 166); border-bottom-color:#f5f5f5; border-left-color: rgb(166, 166, 166);">
                    <p class="se" style="margin-top: 0; margin-bottom: 10px;">ご希望のカード</p>
                </th>
                <th
                    style="border: 1px solid; border-top-color:rgb(166, 166, 166); border-right-color: rgb(166, 166, 166); border-bottom-color:#f5f5f5; border-left-color: rgb(166, 166, 166);">
                    <h3 class="se" style="margin-top: 0; margin-bottom: 10px;">お申し込みについてのご注意事項</h3>
                </th>
                <th
                    style="border: 1px solid; border-top-color:rgb(166, 166, 166); border-right-color: rgb(166, 166, 166); border-bottom-color:#f5f5f5; border-left-color: rgb(166, 166, 166);">
                    <h3 class="se" style="margin-top: 0; margin-bottom: 10px;">ご用意いただくもの</h3>
                </th>
            </tr>
            <!-- 下半部分 -->
            <tr>
                <td
                    style="border: 1px solid; border-top-color:#f5f5f5; border-right-color: rgb(166, 166, 166); border-bottom-color:rgb(166, 166, 166); border-left-color: rgb(166, 166, 166);">
                    <p> <img src="/images/visa_1.jpg" alt="カード画像" style="width: 350px; "></p>
                </td>
                <td
                    style="border: 1px solid; border-top-color: #f5f5f5; border-right-color: rgb(166, 166, 166); border-bottom-color:rgb(166, 166, 166); border-left-color: rgb(166, 166, 166);">
                    <p>
                        本カードは基本的なサービスをWEBにて提供することにより、年会費が無料となる商品です。商品性にご納得いただけない場合、退会いただくこともございますのでご了承ください。ご利用代金明細、サービス案内、付帯保険案内、お問い合わせ等
                    </p>
                </td>
                <td
                    style="border: 1px solid; border-top-color: #f5f5f5; border-right-color: rgb(166, 166, 166); border-bottom-color: rgb(166, 166, 166); border-left-color: rgb(166, 166, 166);">
                    <p>※本人確認書類2点（日本国内で発行の運転免許証または運転経歴証明書、パスポート、在留カード等のコピー）の提出が必要な場合があります。<br>
                        ※2020年2月4日（火）以降に申請されたパスポートの住所欄は緊急連絡先のみの記載のため、本人確認書類としてお取り扱いできません。<br>
                        ※キャッシングサービスをご希望の方は、収入証明書類の提出が必要な場合があります。（例）源泉徴収票、確定申告書、給与明細書等</p>
                </td>
            </tr>
        </table>
        <hr>

        <!-- 添加表单标签 -->
        <form action="/apply/xinxi1" method="post" th:object="${app}">

            <!-- 填写信息 -->

            <div class="section-title"><strong>受付情報登録</strong></div>

            <div class="form-container">
                <!-- メールアドレス字段 -->
                <div class="form-group">
                    <div class="label">Ｅメールアドレス<span><img src="/images/icon_required.png" alt=""></span></div>
                    <div class="input-group">
                        <input type="email" class="input-field" name="mail" placeholder="例:yamata.taro@h.co.jp" required th:field="*{mail}">
                        <div class="note">・Eメールアドレスを入力してください。入金手続きに関するメールをお送りします。</div>
                        <div th:if="${#fields.hasErrors('mail')}" style="color: red; font-size: 14px; margin-top: 5px;">
                            <span th:errors="*{mail}"></span>
                        </div>
                    </div>
                </div>

                <!-- 生年月日字段 -->
                <div class="form-group">
                    <div class="label">生年月日<span><img src="/images/icon_required.png" alt=""></span></div>
                    <div class="input-group">
                        <input type="date" class="input-field" name="ber" placeholder="例:1980-12-31" required th:field="*{ber}">
                        <div th:if="${#fields.hasErrors('ber')}" style="color: red; font-size: 14px; margin-top: 5px;">
                            <span th:errors="*{ber}"></span>
                        </div>
                    </div>
                </div>

                <!-- 携帯電話字段 -->
                <div class="form-group">
                    <div class="label">携帯電話<span><img src="/images/icon_required.png" alt=""></span></div>
                    <div class="input-group">
                        <input type="tel" class="input-field" name="pho" placeholder="例:+080-1234-5678" required th:field="*{pho}">
                        <div th:if="${#fields.hasErrors('pho')}" style="color: red; font-size: 14px; margin-top: 5px;">
                            <span th:errors="*{pho}"></span>
                        </div>
                    </div>
                </div>

                <!-- 個人・法人字段 -->
                <div class="form-group">
                    <div class="label">個人・法人<span><img src="/images/icon_required.png" alt=""></span></div>
                    <div class="input-group">
                        <div class="radio-group">
                            <div class="radio-option">
                                <input type="radio" id="individual" name="kjnhjn" value="1" required class="radio-button" th:field="*{kjnhjn}">
                                <label for="individual" class="radio-label">個人</label>
                            </div>
                            <div class="radio-option">
                                <input type="radio" id="corporate" name="kjnhjn" value="0" required class="radio-button" th:field="*{kjnhjn}">
                                <label for="corporate" class="radio-label">法人</label>
                            </div>
                        </div>
                        <div th:if="${#fields.hasErrors('kjnhjn')}" style="color: red; font-size: 14px; margin-top: 5px;">
                            <span th:errors="*{kjnhjn}"></span>
                        </div>
                    </div>
                </div>

                <!-- 姓字段 -->
                <div class="form-group">
                    <div class="label">お名前<br><span><img src="/images/icon_required.png" alt=""></span></div>
                    <div class="input-group">
                        <div class="name-fields">
                            <div class="field-row">
                                <label for="lastName" class="field-label">姓</label>
                                <input type="text" id="lastName" name="seikj" class="input-field" placeholder="例:山田" required th:field="*{seikj}">
                                <div th:if="${#fields.hasErrors('seikj')}" style="color: red; font-size: 14px; margin-top: 5px;">
                                    <span th:errors="*{seikj}"></span>
                                </div>
                            </div>
                            <div class="field-row">
                                <label for="firstName" class="field-label">名</label>
                                <input type="text" id="firstName" name="meikj" class="input-field" placeholder="例:太郎" required th:field="*{meikj}">
                                <div th:if="${#fields.hasErrors('meikj')}" style="color: red; font-size: 14px; margin-top: 5px;">
                                    <span th:errors="*{meikj}"></span>
                                </div>
                            </div>
                        </div>
                        <div class="note">
                            ・このカードは個人名義でお申し込みください。<br>
                            ・システムの都合上、入力された一部の文字が変換されて登録されるケースがあります。<br>
                            ・本人確認書類と同一表記で入力してください。<br>
                            ・15文字以内で入力してください。
                        </div>
                    </div>
                </div>

                <!-- 姓(フリガナ)字段 -->
                <div class="form-group">
                    <div class="label">お名前<br>フリガナ<span><img src="/images/icon_required.png" alt=""></span></div>
                    <div class="input-group">
                        <div class="name-fields">
                            <div class="field-row">
                                <label for="lastNameKana" class="field-label">姓</label>
                                <input type="text" id="lastNameKana" name="seikn" class="input-field" placeholder="例:ヤマダ" required th:field="*{seikn}">
                                <div th:if="${#fields.hasErrors('seikn')}" style="color: red; font-size: 14px; margin-top: 5px;">
                                    <span th:errors="*{seikn}"></span>
                                </div>
                            </div>
                            <div class="field-row">
                                <label for="firstNameKana" class="field-label">名</label>
                                <input type="text" id="firstNameKana" name="meikn" class="input-field" placeholder="例:タロウ" required th:field="*{meikn}">
                                <div th:if="${#fields.hasErrors('meikn')}" style="color: red; font-size: 14px; margin-top: 5px;">
                                    <span th:errors="*{meikn}"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- ローマ字名字段 -->
                <div class="form-group">
                    <div class="label">ローマ字名</div>
                    <div class="input-group">
                        <div class="name-fields">
                            <div class="field-row">
                                <label for="lastNameRoma" class="field-label">姓</label>
                                <input type="text" id="lastNameRoma" name="seien" class="input-field" th:field="*{seien}">
                                <div th:if="${#fields.hasErrors('seien')}" style="color: red; font-size: 14px; margin-top: 5px;">
                                    <span th:errors="*{seien}"></span>
                                </div>
                            </div>
                            <div class="field-row">
                                <label for="firstNameRoma" class="field-label">名</label>
                                <input type="text" id="firstNameRoma" name="meien" class="input-field" th:field="*{meien}">
                                <div th:if="${#fields.hasErrors('meien')}" style="color: red; font-size: 14px; margin-top: 5px;">
                                    <span th:errors="*{meien}"></span>
                                </div>
                            </div>
                        </div>
                        <div class="note">
                            ・ローマ字はカード表面に名・姓の順で印字されます。<br>
                            ・ローマ字名の表記をご確認のうえ、変更が必要な場合は直接入力してください。<br>
                            ・ローマ字は入力開始と少数以内で自動変換しています。自動変換後に「お名前（フリガナ）」<br>
                            を修正された場合は、ローマ字も修正してください。<br>
                            ・入力明細と字数を超える場合は、ご希望の処理方に修正してください。<br>
                            <em>＜仮納例＞YAMAMOTO KAZUO → YAMAMOTO K</em>
                        </div>
                    </div>
                </div>

                <!-- 性别字段 -->
                <div class="form-group">
                    <div class="label">性别<span><img src="/images/icon_required.png" alt=""></span></div>
                    <div class="input-group">
                        <div class="radio-group">
                            <div class="radio-option">
                                <input type="radio" id="male" name="sex" value="1" required class="radio-button" th:field="*{sex}">
                                <label for="male" class="radio-label">男</label>
                            </div>
                            <div class="radio-option">
                                <input type="radio" id="female" name="sex" value="0" required class="radio-button" th:field="*{sex}">
                                <label for="female" class="radio-label">女</label>
                            </div>
                        </div>
                        <div th:if="${#fields.hasErrors('sex')}" style="color: red; font-size: 14px; margin-top: 5px;">
                            <span th:errors="*{sex}"></span>
                        </div>
                    </div>
                </div>


            </div>

            <hr>
            <button type="submit" class="button">次へ進む</button>
        </form>

        <!-- 居中显示版权信息 -->
        <div class="container">
            <p style="text-align: center;">Copyright © H · All Rights Reserved ·</p>
        </div>

    </div>

</body>

</html>
